<template>
  <div class="home-container">
    <top-bar>
      <div class="top_bar">
        <search-view :data="data"></search-view>
        <weather></weather>
        <theme :data=themes></theme>
      </div>
    </top-bar>

      <!--      内容区-->
      <div class="home-content">

<!--        左边内容区-->
        <div class="home-left">
          <div class="home-left-top">

            <div class="movie-window">
              <video-card></video-card>
            </div>

            <div class="hot-info">
              <hot-info :data="hotinfo"></hot-info>
            </div>

          </div>
          <div class="home-left-bottom">
            <div class="label">
              <div class="name"><span>猜你喜欢</span></div>
              <a class="more" href="#">more</a>
            </div>
            <div class="home-like-list list-y">
              <game-card v-for="i in datas" :game="i" :key="i.imgUrl"></game-card>
            </div>
          </div>
        </div>

<!--        右边-->
        <div class="home-right right-screen">
          <div class="user-info-box">
            <div class="user"></div>
            <div class="nickname">
              <span>Song</span>
            </div>
            <div class="describe">
                  <span>
                    Believe in yourself !
                  </span>
            </div>
            <div class="label">
              <div class="name"><span>Actives</span></div>
              <a class="more" href="#">See all</a>
            </div>
          </div>
          <div class="activity-list list-y">
            <active-card v-for="i in messages" :key="i.id" :message="i"></active-card>
          </div>
        </div>
      </div>

  </div>
</template>
<style lang="less" scoped>
.home-container {
  width: 100%;
  height: 100%;
  padding: 10px;
  display: flex;
  flex-direction: column;

  .top_bar {
    display: flex;
    -webkit-app-region: drag; //设置可拖拽，但是要在子组件不需要拖到的地方取消，不然会失焦
    align-content: center;
    justify-content: space-between;
  }
  .home-content {
    display: flex;
    height: 100%;
    width: 100%;
    gap: 10px;
    margin-top: 10px;
  }

//  左边
  .home-left {
    flex: 1;
    display: flex;
    gap: 10px;
    flex-direction: column;

    .home-left-top {
      flex: 1;
      display: flex;
      gap: 10px;

      .movie-window {
        width: 65%;
        height: 100%;
      }

      .hot-info {
        height: 100%;
        width: 33%;
        border-radius: 20px;
        box-shadow: 5px 5px 5px rgba(122, 95, 95, 0.5);
        background-color: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(10px);
        display: flex;
        flex-direction: column;
      }
    }

    .home-left-bottom {
      flex: 1;
      display: flex;
      flex-direction: column;

      .home-like-list {
        width: 100%;
        height: 100%;
        padding: 10px;
        display: flex;
        gap: 10px;
        align-items: center;
        justify-content: space-between;
      }

    }

  }

//  右边
  .home-right {
    width: 28%;
    padding: 5px;
    display: flex;
    flex-direction: column;
    background: url("@/assets/icons/transparent-big.png");
    box-shadow: -5px 5px 10px rgba(0, 0, 0, 0.5);
    border-radius: 15px;

    .user-info-box {
      height: 40%;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      flex-direction: column;

      .user {
        width: 100px;
        height: 100px;
        margin-top: 16px;
        border-radius: 50%;
        border: 2px solid white;
        background-image: url("@/assets/images/pic_5ijxAKSAYKErWtalMemh2.jpg");
        background-size: 100px 100px;
        background-position: center;
      }

      .nickname {
        color: white;
        font-size: 28px;
      }

      .describe {
        font-size: 20px;
      }
    }

    .active-list {
      height: 55%;
      overflow-y: scroll;
      background-color: #7DE2FC;
      width: 100%;
    }
  }

}


</style>
<script lang="ts" setup>
import TopBar from "@/components/top-bar.vue"
import SearchView from "@/components/search.vue"
import Weather from "@/components/weather.vue"
import Theme from "@/components/theme.vue"
import messageJson from "@/assets/data/active-data.json";
import ActiveCard from "@/components/active-card.vue"
import {reactive} from "vue";
import {themes} from "@/config/data";
import GameCard from "@/components/game-card.vue"
import VideoCard from "@/components/video-card.vue"
import HotInfo from "@/components/hot-info.vue"
import HotInfoJson from "@/assets/data/active-info.json"

const hotinfo = HotInfoJson
const datas = [{
  imgUrl: '../src/assets/images/yongjiewujian.jpg',
  btnText: "PLAY",
  name: '永劫无间'
},
  {
    imgUrl: '../src/assets/images/t6_24965201.jpg',
    btnText: "READ",
    name: '平凡的世界'
  },
  {
    imgUrl: '../src/assets/images/movie.jpg',
    btnText: "PLAY",
    name: '误杀'
  },
  {
    imgUrl: '../src/assets/images/fengquan.jpg',
    btnText: "PLAY",
    name: '风犬少年的天空'
  },
]
const data = reactive<Array<string>>(['hello', 'world'])
const messages = messageJson

</script>